<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Layui</title>
    <link rel="stylesheet" th:href="@{/pear/component/luminar/css/luminar.css}">

    <style>

    </style>
</head>

<body>
<div>
    <div>
        <h1 style="text-align: center" id="formName"></h1>
    </div>
    <div id="testdemo" style="width:60%;margin: 30px auto;padding: 30px;border: 2px solid #009688;">

    </div>
</div>

<div class="getFormData" style="display: none;">
    <textarea class="site-demo-text" id="get-form-data"></textarea>
</div>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/luminar/luminar.js}"></script>
<script th:src="@{/pear/component/luminar/js/Sortable/Sortable.js}"></script>
<script th:src="@{/pear/component/luminar/js/iceEditor/iceEditor.js}"></script>

<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';

    //JavaScript代码区域
    layui.use(['formDesigner', 'form', 'layer', 'upload'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let upload = layui.upload;
        let index = layui.index;
        let formDesigner = layui.formDesigner;
        let form = layui.form;
        let render;
        if (parent.nowFieldData !== undefined) {
            $('#formName').text(parent.nowFormName)
            let fieldData = JSON.parse(parent.nowFieldData);
            let formData = JSON.parse(parent.formData);
            render = formDesigner.render({
                elem: '#testdemo',
                data: fieldData,
                viewOrDesign: true,
                formData: formData
            });
            render.globalDisable()
            let images = render.getImages()
            let imgFile = formData.imgFile
            for (let i = 0; i < images.length / 2; i++) {
                let nowImgList = imgFile[i]['' + images[i].select]
                for (let j = 0; j < nowImgList.length; j++) {
                    $('#uploader-list-' + images[i].select.replace("image", "")).append(
                        `<div id="" class="file-iteme">
                        <div class="handle"><i class="layui-icon layui-icon-delete"></i></div>
                        <img style="width: 100px;height: 100px;" src="${baseURL}${nowImgList[j]}" alt="Image">
                        </div>`
                    );
                }
            }

            let filesData = render.getFiles();
            let files = formData.files
            for (let i = 0; i < filesData.length / 2; i++) {
                $('#' + filesData[i].select.replace("file", "") + " .layui-input-block").html(
                    `<div style="padding: 0 20px"><p>点击下方文件名即可下载</p><ul></ul></div>`
                )
                $('#' + filesData[i].select).hide()
                $('#listAction-' + filesData[i].select.replace("file", "")).hide()
                for (let j = 0; j < files[i][filesData[i].select].length; j++) {
                    let fileName = files[i][filesData[i].select][j].split("/").pop().split("_").pop()
                    $('#' + filesData[i].select.replace("file", "") + " .layui-input-block ul").append(
                        `<li style="margin-top: 10px"><a href="${baseURL}${files[i][filesData[i].select][j]}" download="${fileName}" style="margin-left: 10px; color: #1e9fff;">
                         ${fileName}
                         </a></li>`
                    )
                }
            }


            let signs = formData.signs
            if (signs) {
                for (let i = 0; i < signs.length; i++) {
                    console.log(('#' + signs[i].id + 'sign'));
                    $('#' + signs[i].id + 'sign').parent().append(
                        `<div class="signImg"><img src="${signs[i].data}"></div>`
                    );
                }
            }


            $('#submit_data').hide();

        }
    });

</script>
</body>

</html>
